<template>
	<div style="display: flex;flex-direction: column;" class="otherPage corporateNews enterpriseDynamics">
		<Header :selected="4"></Header>
		<div class="bannerArea">
			<div class="banner" :style="bg_img? 'background:url('+bg_img+') no-repeat;background-size:cover;':''">
			</div>
		</div>
		<Navigation v-loading="loading" :items="breadcrumbItems" :menus="menus" :bgColor="bgColor" :checked="1">
		</Navigation>
		<div class="content">
			<div class="content_bg">
				<el-row :gutter="20">
					<el-col :xs="24" :sm="24" :md="24" :lg="12" class="newArea" v-for="(news, index) in newsList"
						:key="index">
						<div class="news-list">
							<el-row class="news-item" :class="{ 'hover': hoverIndex === index }"
								@mouseover="hoverIndex = index" @mouseleave="hoverIndex = -1">
								<el-col :xs="enterpriseDynamicsLeft_xs" :sm="6" :md="6" :lg="11" class="newsImg">
									<img style="object-fit: cover;" :src="news.fileUrl">
								</el-col>
								<el-col :xs="enterpriseDynamicsRight_xs" :sm="18" :md="18" :lg="13" class="newcontent">
									<div class="newcontentcontainer" @click="goToDetail(news.id)">
										<div class="title" :title="news.titles">{{ news.titles }}</div>
										<div class="newsDate">
											{{$t("newsTime")}}{{ news.publishTime?news.publishTime.substring(0,10):'' }}
										</div>
										<div class="abstract">{{$t("newsAbstract")}}</div>
										<div v-html="$request.formartContent(news.content)" class="description">
										</div>
										<div class="moreInfoBtn">{{$t("moreDetails")}} <i
												class="el-icon-d-arrow-right"></i>
										</div>
									</div>
								</el-col>
							</el-row>
						</div>
					</el-col>
				</el-row>

				<el-row :gutter="24" type="flex">
					<el-col :span="24" class="newMore">
						<el-button type="danger" @click="gotoDynamicsList()">{{$t("more")}}<i
								class="el-icon-d-arrow-right"></i>
						</el-button>
					</el-col>
				</el-row>
			</div>
		</div>
		<Footer></Footer>
	</div>
</template>

<script>
	import Header from '../../../src/components/common/header/Header.vue'
	import Navigation from '../../../src/components/common/navigation/Navigation.vue'
	import Footer from '../../../src/components/common/footer/Footer.vue'
	import Pagination from '../../../src/components/common/Pagination.vue'
	import {
		corporateNews
	} from '../../utils/menu.js'
	export default {
		components: {
			Header,
			Navigation,
			Footer,
			Pagination
		},
		data() {
			return {
				loading: true,
				bg_img: '', //头部banner，默认值已绑定，有背景自动切换
				bgColor: "white", //white/red
				pageSize: 4,
				total: 1000,
				currentPage: 1,
				menus: corporateNews,
				breadcrumbItems: [{
						//首页
						label: this.$t('home'),
						to: '/home'
					},
					{
						//企业新闻
						label: this.$t('corporateNews'),
						to: '/corporateNews'
					},
					{
						//企业动态
						label: this.$t('enterpriseDynamics'),
						to: '/enterpriseDynamics'
					}
				],

				newsList: [],
				hoverIndex: -1,
				enterpriseDynamicsLeft_xs: 6,
				enterpriseDynamicsRight_xs: 18
			};
		},
		computed: {},
		created() {},
		mounted() {
			this.enterpriseDynamicsLeft_xs = (window.innerWidth <= 768) ? 24 : 6;
			this.enterpriseDynamicsRight_xs = (window.innerWidth <= 768) ? 24 : 18;
			this.bindList();
			this.bindBg();
			window.addEventListener('resize', this.handleWindowResize);
		},
		destroyed() {
			window.removeEventListener('resize', this.handleWindowResize);
		},
		methods: {
			handleWindowResize() {
				if (window.innerWidth <= 768) {
					this.enterpriseDynamicsLeft_xs = 24;
					this.enterpriseDynamicsRight_xs = 24;
				} else {
					this.enterpriseDynamicsLeft_xs = 6;
					this.enterpriseDynamicsRight_xs = 18;
				}
			},
			/**
			 * (1)	获取企业新闻顶部背景
			 */
			bindBg() {
				let params = {};
				let that = this;
				that.$request.qydtBgImage(params).then(res => {
					this.bg_img = this.$request.getImgUrl() + res.data.fileUrl
				}).catch((error) => {
					console.log(error);
				});

			},
			/**
			 * (1)	获取企业新闻列表
			 */
			bindList() {
				let params = {};
				let that = this;
				that.$request.enterpriseTrendsList(params).then(res => {
					this.newsList = res.data;
					this.loading = false;
				}).catch((error) => {
					console.log(error);
				});

			},
			gotoDynamicsList() {
				this.$router.push({
					name: this.$t("enterpriseDynamicsList"),
				});
			},
			//////跳转详情页面
			goToDetail(id) {
				this.$router.push({
					name: this.$t("enterpriseDynamicsDetail"),
					query: {
						id: id,
					}
				});
			},

		}
	}
</script>

<style scoped>
	@import url("../../components/common/css/corporateNews/corporateNews.css");

	.enterpriseDynamics .newArea {
		height: auto;
	}

	.enterpriseDynamics .newcontentcontainer {
		position: relative;
		background-color: #f5f5f5;
	}

	.enterpriseDynamics .paginationArea {
		height: 70px;
		line-height: 70px;
		justify-content: center;
		padding-top: 20px;
	}

	.enterpriseDynamics .moreInfoBtn {
		width: 97px;
		height: 30px;
		line-height: 30px;
		border: 1px solid #EB7F20;
		border-radius: 4px;
		text-align: center;
		color: #EB7F20;
		/* margin-top: 2vh; */
		margin-left: 10px;
		position: absolute;
		right: 10px;
		bottom: 10px;
	}

	.enterpriseDynamics .moreInfoBtn:hover {
		background-color: #EB7F20;
		color: #FFF;
	}

	.enterpriseDynamics .news-list .news-item {


		border-radius: 10px;
	}

	.enterpriseDynamics .news-list .el-image__inner {
		object-fit: cover !important;
	}

	.enterpriseDynamics .news-list .news-item:hover .newsImg {
		background-color: #FFF;
	}

	.enterpriseDynamics .news-list .day {
		text-align: center;
		font-size: 2em;
		padding-top: 3vh;
		height: 13vh;
	}

	.enterpriseDynamics .news-list .month-year {
		text-align: center;
		font-size: 1.2em;
	}

	.enterpriseDynamics .btn-next span {
		min-width: 50px !important;
	}

	.el-pagination span:not([class*=suffix]) {
		display: inline-block;
		font-size: 13px;
		min-width: 50px !important;
		height: 28px;
		line-height: 28px;
		vertical-align: top;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}

	.news-item {
		margin-bottom: 20px;
		cursor: pointer;
		overflow: hidden;
		transition: transform 0.3s ease;
		/* 添加过渡效果 */
	}

	.enterpriseDynamics .news-item:hover {
		transform: scale(0.98)
	}

	.enterpriseDynamics .el-button--danger {
		background-color: #0484D7;
		border-color: #0484D7;
		margin-top: 20px;
		width: 110px;
		height: 40px;
	}

	.enterpriseDynamics .el-button--danger:hover {
		background-color: #409EFF;
		border-color: #409EFF;
	}

	.enterpriseDynamics .el-button--danger span:hover {
		font-size: 13px;
	}

	.enterpriseDynamics .news-item:hover .newcontent .title {
		color: #0484D7;
	}

	.enterpriseDynamics .newcontent .title {
		color: #333333;
		font-weight: 530;
		font-size: 20px;
		height: 40px;
		line-height: 30px;
	}

	.enterpriseDynamics .newcontent .newsDate {
		color: #777777;
		font-weight: 400;
		padding-left: 10px;
		height: 36px;
		line-height: 36px;
		align-items: center;
		font-size: 14px;
	}

	.enterpriseDynamics .newcontent .description {
		color: #777777;
		font-weight: 400;
		font-size: 16px;
		height: 60px;
		line-height: 30px;
	}

	.enterpriseDynamics .newcontent .abstract {
		padding-left: 10px;
		color: #747474;
		/* 		font-weight: 400; */
		font-size: 16px;
		opacity: 0.8;
	}


	.news-list .newsImg {}

	.content_bg {
		margin: 0px auto;
		padding: 50px;

	}



	.news-list {
		margin-bottom: 10px;
	}

	@media (min-width: 2560px) {
		.content_bg {
			width: calc(2560px * 0.8);
		}

		.enterpriseDynamics .news-list {
			height: calc(1px*(2560/1920*224));
		}

		.enterpriseDynamics .news-list .news-item {
			height: calc(1px*(2560/1920*224));
		}

		.enterpriseDynamics .news-list .newsImg {
			text-align: right;

		}

		.newcontent {

			height: calc(1px*(2560/1920*224));
		}

		.enterpriseDynamics .news-list .newsImg img {
			width: calc(1px*(2560/1920*324));
			height: calc(1px*(2560/1920*224))
		}
	}

	@media (max-width: 2560px) {
		.content_bg {
			width: calc(2560px * 0.8);
		}

		.enterpriseDynamics .news-list {
			height: calc(1px*(2560/1920*224));
		}

		.enterpriseDynamics .news-list .news-item {
			height: calc(1px*(2560/1920*224));
		}

		.enterpriseDynamics .newcontent {

			height: calc(1px*(2560/1920*224));
		}

		.enterpriseDynamics .news-list .newsImg {
			text-align: right;
		}

		.enterpriseDynamics .news-list .newsImg img {
			width: calc(1px*(2560/1920*324));
			height: calc(1px*(2560/1920*224))
		}
	}

	@media (max-width: 2320px) {

		.content_bg {
			width: calc(2320px * 0.8);
		}

		.enterpriseDynamics .news-list {
			height: calc(1px*(2320/1920*224));
		}

		.enterpriseDynamics .news-list .news-item {
			height: calc(1px*(2320/1920*224));
		}

		.enterpriseDynamics .newcontent {

			height: calc(1px*(2320/1920*224));
		}

		.news-list .newsImg {
			text-align: right;
		}

		.news-list .newsImg img {
			width: calc(1px*(2320/1920*324));
			height: calc(1px*(2320/1920*224))
		}
	}

	@media (max-width: 2120px) {
		.content_bg {
			width: calc(2120px * 0.8);
		}

		.enterpriseDynamics .news-list {
			height: calc(1px*(2120/1920*224));
		}

		.enterpriseDynamics .news-list .news-item {
			height: calc(1px*(2120/1920*224));
		}

		.enterpriseDynamics .newcontent {

			height: calc(1px*(2120/1920*224));
		}

		.enterpriseDynamics .news-list .newsImg {
			text-align: right;
		}

		.news-list .newsImg img {
			width: calc(1px*(2120/1920*324));
			height: calc(1px*(2120/1920*224))
		}
	}

	@media (max-width: 1920px) {
		.content_bg {
			width: calc(1920px * 0.8);
		}

		.enterpriseDynamics .news-list {
			height: 224px;
		}

		.enterpriseDynamics .news-list .news-item {
			height: 224px;
		}

		.enterpriseDynamics .news-list .newsImg {
			text-align: right;
		}

		.enterpriseDynamics .newcontent {

			height: 224px;
		}

		.enterpriseDynamics .news-list .newsImg img {
			width: 324px;
			height: 224px;
		}

	}

	@media (max-width: 1720px) {

		.content_bg {
			width: calc(1720px * 0.8);
		}

		.enterpriseDynamics .news-list {
			height: calc(1px*(1720/1920*224));
		}

		.enterpriseDynamics .news-list .news-item {
			height: calc(1px*(1720/1920*224));
		}

		.enterpriseDynamics .news-list .newsImg {
			text-align: right;
		}

		.enterpriseDynamics .newcontent {

			height: calc(1px*(1720/1920*224));
		}

		.enterpriseDynamics .news-list .newsImg img {
			width: calc(1px*(1720/1920*324));
			height: calc(1px*(1720/1920*224))
		}

	}

	@media (max-width: 1520px) {
		.enterpriseDynamics .content_bg {
			width: calc(1520px * 0.8);
		}

		.enterpriseDynamics .news-list {
			height: calc(1px*(1520/1920*224));
		}

		.enterpriseDynamics .news-list .news-item {
			height: calc(1px*(1520/1920*224));
		}

		.enterpriseDynamics .newcontent {

			height: calc(1px*(1520/1920*224));
		}

		.enterpriseDynamics .news-list .newsImg {
			text-align: right;
		}

		.enterpriseDynamics .news-list .newsImg img {
			width: calc(1px*(1520/1920*324));
			height: calc(1px*(1520/1920*224))
		}

		.enterpriseDynamics .newcontent .description {

			font-size: 12px;
			height: 40px;
			line-height: 20px
		}


	}

	@media (max-width: 1366px) {
		.enterpriseDynamics .content_bg {
			width: calc(1366px * 0.8);
		}

		.enterpriseDynamics .news-list {
			height: calc(1px*(1366/1920*224));
		}

		.enterpriseDynamics .news-list .news-item {
			height: calc(1px*(1366/1920*224));
		}

		.enterpriseDynamics .newcontent {

			height: calc(1px*(1366/1920*224));
		}

		.enterpriseDynamics .news-list .newsImg {
			text-align: right;
		}

		.enterpriseDynamics .news-list .newsImg img {
			width: calc(1px*(1366/1920*324));
			height: calc(1px*(1366/1920*224))
		}

		.enterpriseDynamics .newcontent .title {
			color: #333333;
			font-weight: 530;
			font-size: 16px;
			height: 30px;
			line-height: 16px;
		}

		.enterpriseDynamics .newcontent .newsDate {
			color: #777777;
			font-weight: 400;
			padding-left: 10px;
			height: 30px;
			line-height: 30px;
			font-size: 12px;
		}

		.enterpriseDynamics .newcontent .abstract {
			padding-left: 10px;
			color: #747474;
			font-size: 14px;
			opacity: 0.8;
		}

		.enterpriseDynamics .newcontent .description {
			font-size: 10px;
			height: 34px;
			line-height: 17px;
		}

	}

	@media (max-width: 1120px) {

		.content_bg {
			width: 100%;
		}

		.enterpriseDynamics .news-list {
			height: calc(1px*(1520/1920*224));
		}
	}

	@media (max-width: 1024px) {
		.enterpriseDynamics .content_bg {
			width: calc(1024px * 0.8);
		}

	}

	@media (max-width: 900px) {
		.enterpriseDynamics .content_bg {
			width: calc(900px * 0.8);
		}

		.enterpriseDynamics .moreInfoBtn {
			bottom: 4px;
		}
	}





	@media(max-width:768px) {

		.el-col-sm-6,
		.el-col-sm-18 {
			width: 100% !important;
			/* width: calc(1px*(768*0.7));
			    height: calc(1px*(768*0.6 * 520 / 720)); */
		}

		/* 	.content_bg {
			width: calc(768px * 0.8);
		} */

		.enterpriseDynamics .news-list {
			/* height: calc(1px*(768/1920*224)); */
			height: calc(1px*(768/1920*1920 * 520 / 720 + 200));
		}

		.enterpriseDynamics .news-list .news-item {
			/* 	height: calc(1px*(768/1920*224)); */
			height: calc(1px*(768/1920*1920 * 520 / 720 + 200));
		}

		.enterpriseDynamics .content,
		.enterpriseDynamics .content_bg {
			padding: 5px
		}

		.enterpriseDynamics .newcontent .description {
			color: #777777;
			font-weight: 400;
			font-size: 10px;
		}

		.enterpriseDynamics .news-item .newcontent .title {
			color: #0484D7;
		}


		.enterpriseDynamics .content_bg {
			width: 98%;
		}

		.enterpriseDynamics .newcontent {
			height: calc(1px*(768*0.6* 520 / 720));
			height: 200px;

		}

		.enterpriseDynamics .news-list .newsImg {
			text-align: center;
		}

		.enterpriseDynamics .news-list .newsImg img {
			width: calc(1px*(768));
			height: calc(1px*(768*0.8 * 520 / 720));
		}

		.enterpriseDynamics .newcontent .description {

			font-size: 12px;
			height: 40px;
			line-height: 20px
		}

	}

	@media(max-width:440px) {

		.content_bg {
			width: calc(430px * 0.8);
		}

		.enterpriseDynamics .news-list {
			/* height: calc(1px*(430/1920*1920 * 520 / 720 + 200)); */
			height: max-content;
		}

		.enterpriseDynamics .news-list .news-item {
			/* height: calc(1px*(430/1920*1920 * 520 / 720 + 200)) !important; */
			height: max-content;
		}

		.enterpriseDynamics .content,
		.enterpriseDynamics .content_bg {
			padding: 5px;
			width: calc(430px * 0.8);
		}

		.enterpriseDynamics .newcontent .description {
			color: #777777;
			font-weight: 400;
			font-size: 10px;
		}

		.enterpriseDynamics .news-item .newcontent .title {
			color: #0484D7;
		}


		.enterpriseDynamics .content_bg {
			width: 100%;
		}

		.enterpriseDynamics .newcontent {
			height: calc(1px*(430*0.72 * 520 / 720));
			height: 200px;
		}

		.enterpriseDynamics .news-list .newsImg {
			text-align: center;
			width: calc(1px*(430 * 0.72)) !important;
			height: calc(1px*(430 * 0.72 * 520 / 720)) !important;
		}

		.enterpriseDynamics .news-list .newsImg img {
			width: calc(1px*(430 * 0.72))  !important;
			height: calc(1px*(430 * 0.72 * 520 / 720)) !important;
		}

		.enterpriseDynamics .newcontent .description {
			font-size: 12px;
			height: 60px;
			line-height: 32px;
		}

	}
</style>
